import React, { Component } from 'react';
import { connect } from 'dva'
import { InputNumber, Input, Button, Form, Modal } from 'antd';
import styles from './ChargeManage.less'

const FormItem = Form.Item;

class ChargeManage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isEdit: true,
      editData: true
    }
  }

  onHandleSave = () => {
    const { validateFields, getFieldsValue } = this.props.form
    const { chargeItem } = this.props
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
        id: chargeItem && chargeItem.id
      };
      console.log('data', data)

      Modal.confirm({
        title: '确定要修改此项目?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.setState({ isEdit: true })
          this.props.onReviseOk && this.props.onReviseOk(data);
        },
      });
    });
  }

  onHandleRevise = () => {
    this.setState({ isEdit: false })
  }



  render() {
    const { getFieldDecorator } = this.props.form
    const { chargeItem, } = this.props
    const { isEdit } = this.state
    const { isAdmin } = this.props.login
    console.log('props', this.props)
    return (
      <div className={styles.ChargeManage} >
        <Form onSubmit={this.handleSubmit}>
          <ul>
            <li>
              <ul>
                <li><span>积分兑换比例</span></li>
                <li><span>消费金</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('money', {
                      initialValue: chargeItem && chargeItem.money,
                    })(
                      <InputNumber disabled={isEdit} min={0} />
                    )}
                  </FormItem>
                </li>
                <li><span>:</span></li>
                <li><span>积分</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('bonous', {
                      initialValue: chargeItem && chargeItem.bonous,
                    })(
                      <InputNumber disabled={isEdit} min={0} />
                    )}
                  </FormItem>
                </li>
              </ul>
            </li>
            <li>
              <ul>
                <li style={{ paddingRight: '60px' }}><span>起充金额</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('minRechargeMoney', {
                      initialValue: chargeItem && chargeItem.minRechargeMoney,
                    })(
                      <InputNumber disabled={isEdit} min={0} style={{ width: '100px' }} />
                    )}
                  </FormItem>
                </li>
                <li style={{ paddingTop: '0' }}><span>元</span></li>
              </ul>
            </li>
            <li>
              <ul>
                <li><span>客户端提示文字</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('tip', {
                      initialValue: chargeItem && chargeItem.tip,
                    })(
                      <Input maxLength="28" disabled={isEdit} style={{ width: '370px' }} />
                    )}
                  </FormItem>
                </li>
                <li style={{ paddingTop: '0' }}><span style={{ color: 'red', }}>最多输入28字</span></li>
              </ul>
            </li>
            <li>
              <ul style={{ marginLeft: '-28px' }}>
                <li style={{ paddingRight: '20px' }}><span>消费金兑换积分提示</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('conversionRatioTip', {
                      initialValue: chargeItem && chargeItem.conversionRatioTip,
                    })(
                      <Input maxLength="28" disabled={isEdit} style={{ width: '370px' }} />
                    )}
                  </FormItem>
                </li>
              </ul>
            </li>
          </ul>
        </Form>
        {isAdmin ? <Button type="primary" ghost onClick={isEdit ? this.onHandleRevise : this.onHandleSave}>{isEdit ? "编辑" : "保存"}</Button> : <div></div>}
      </div>
    );
  }
}

export default connect(({ login }) => ({ login }))(Form.create()(ChargeManage));
